<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Neaste购物车</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        td {
            font-size: 20px;
            font-weight: 40px;
            width: 150px;
            text-align: center;
        }

        .ak {
            display: flex;
            text-align: center;
            justify-content: center;
            color: #fff;
        }

        a {
            text-decoration: none;

        }

        li {
            position: relative;
            text-align: center;
        }

        li,
        a:hover {
            color: aqua;
        }

        li::after {
            content: "";
            position: absolute;
            width: 0;
            height: 5px;
            background: #58d3e4;
            bottom: 10px;
            /* left: 50%; */
            transform: translate(-50%, 0);
            transition: 1s;
        }

        li:hover::after {
            width: 80%;
        }

        table {
            border-top: solid 1px #666666;
            border-left: solid 1px #666666;
        }

        td {
            text-align: center;
            border-right: solid 1px #666666;
            border-bottom: solid 1px #666666;
        }

        .left {
            text-align: left;
            padding-left: 10px;
        }

        h1 {
            text-align: center;
        }

        table {
            margin: 0 auto;
            width: 1250px;
            border: 2px solid #aaa;
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 2px solid #aaa;
            padding: 5px;
        }

        th {
            background-color: #eee;
        }

        td {
            width: 200px;
        }

        .id {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div style="width: 1250px;height: 80px;margin: 0 auto;">
        <a href="../pages/Neast163.html">
            <img src="../image/star.png" style="float:left;width:280px;height:
                    65px;margin: 7px 0 5px;"></a>
        <div
            style="position: relative;width: 300px;height: 80px;line-height: 90px;float: right;background-color: #93f0f5;transform: skewX(-20deg);display: flex;align-items: center;justify-content: center;">
            <a href="" style="text-decoration: none;font-size: 14px;transform: skewX(20deg);">
                <img src="../image/login.png" width="16px;" height:="16px;"
                    style="position:relative;top: 3px;">个人中心&nbsp;&nbsp;</a>
            <a href="../pages/Neaste163.html"
                style="text-decoration:none;font-size: 14px;transform: skewX(20deg);">&nbsp;
                <img src="../image/exitt.png" width="16px;" height:="16px;"
                    style="position:relative;top: 3px;">退出登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="../pages/NeastShopping.html">
                <img src="../image/cart.png" style="width:17px;height:17px;" alt="购物车">
            </a>
        </div>
    </div>
    <div style="width: 100%;height: 64px;line-height: 64px;background-color:#000;">
        <div style="width: 1250px;height: 64px;margin: 0 auto;background-color: #000;">
            <div>
                <ul>
                    <li
                        style="width: 100px;font-family: MicrosoftYahei;list-style-type: none;float: left;text-align:center;height:64px;">
                        <a href="../pages/Neast163.html" class="ak">首页&nbsp;</a>
                    </li>
                    <li
                        style="width: 100px;font-family: MicrosoftYahei;list-style-type: none;float: left;text-align:center;height:64px;">
                        <a href="../pages/inde.html" class="ak">关于&nbsp;</a>
                    </li>
                    <li
                        style="width: 100px;font-family: MicrosoftYahei;list-style-type: none;float: left;text-align:center;height:64px;">
                        <a href="../pages/faqa.html" class="ak">FAQ&nbsp;</a>
                    </li>
                    <li
                        style="width: 100px;font-family: MicrosoftYahei;list-style-type: none;float: left;text-align:center;height:64px;">
                        <a href="../pages/NeasteAftershop.html" class="ak">售后&nbsp;</a>
                    </li>
                    <li
                        style="width: 100px;font-family: MicrosoftYahei;list-style-type: none;float: left;text-align:center;height:64px;">
                        <a href="../pages/sugges.html" class="ak">联系&nbsp;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div style="width: 1250px;height:100%;margin:0 auto;">
        <table style="width: 1250px;height: 800px;" cellspacing="0" cellpadding="0">
            <tr>
                <td>商品图片</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minfir.jpg" style="width: 180px;height: 180px;" />
                </td>
                <td class="left">迷你蓝牙耳机</td>
                <td class="sum">99.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/mintwo.jpg" style="width: 180px;height: 180px;" />
                </td>
                <td class="left">击音蓝牙接收器</td>
                <td class="sum">26.80元</td>
                <td>
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minthr.jpg" style="width: 180px;height: 180px;" />
                </td>
                <td class="left">无线蓝牙耳机</td>
                <td class="sum">899.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minfou.jpg" style="width: 180px;height: 180px;" />
                </td>
                <td class="left">合金车载充电器</td>
                <td class="sum">188.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minfiv.jpg" style="width: 180px;height:
                            180px;" />
                </td>
                <td class="left">全国通用转换插头</td>
                <td class="sum">99.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minsix.jpg" style="width: 180px;height:
                            180px;" />
                </td>
                <td class="left">原装高透保护膜</td>
                <td class="sum">29.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/minsev.jpg" style="width: 180px;height:
                            180px;" />
                </td>
                <td class="left">原装高清保护膜</td>
                <td class="sum">29.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../image/mineig.jpg" style="width: 180px;height:
                            180px;" />
                </td>
                <td class="left">曲面高透保护膜</td>
                <td class="sum">49.00元</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
                </td>
            </tr>
        </table>
        <div id="photo" onmouseout="hidden()" onmousemove="shows()"></div>
        <h1>购物车</h1>
        <table id="a">
            <thead>
                <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>金额（元）</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody id="goods">
            </tbody>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td><button onclick="tk(this)"><a href="../pages/money.html">购买</a></button></td>
            </tr>
        </table>
    </div>
    <div style="width: 100%;height: 350px;background-color: #f7f7f7;">
        <div style="height: 100%;width: 1250px;margin: 0 auto;background-color: #f7f7f7;">
            <div style="width:1250px;height:300; display: flex;flex-wrap: wrap;padding: 50px 0 0 0;;">
                <div style="width: 415px;height: 300px;">
                    <div>
                        <span style="font-size: 34px;line-height:80px;font-weight:550">Contact</span>
                    </div>
                    <div>
                        <span style="line-height:60px">地址：江苏省苏州市工业园区中新大道西加成大厦</span>
                    </div>
                    <div>
                        <span style="width: 390px; font-size: 30px;line-height:30px;font-weight:550">+86 123 1234
                            1234</span>
                    </div>
                    <div>
                        <span style="line-height:60px">邮箱：qifeiye@admin.com</span>
                    </div>
                </div>
                <div style="width: 209px;height: 300px;">
                    <div>
                        <span style="font-size: 34px;line-height:80px;font-weight:550">Quick Links</span>
                    </div>
                    <div>
                        <span style="line-height:30px">常见问题</span>
                    </div>
                    <div>
                        <span style="line-height:30px">测评中心</span>
                    </div>
                    <div>
                        <span style="line-height:30px">保修政策</span>
                    </div>
                    <div>
                        <span style="line-height:30px">售后服务</span>
                    </div>
                    <div>
                        <span style="line-height:30px">专属客服</span>
                    </div>
                </div>
                <div style="width: 210px;height: 300px;">
                    <div>
                        <span style="font-size: 34px;line-height:80px;font-weight:550">Products</span>
                    </div>
                    <div>
                        <span style="line-height:30px">充电</span>
                    </div>
                    <div>
                        <span style="line-height:30px">手机</span>
                    </div>
                    <div>
                        <span style="line-height:30px">生活</span>
                    </div>
                    <div>
                        <span style="line-height:30px">配件</span>
                    </div>
                    <div>
                        <span style="line-height:30px">音乐</span>
                    </div>
                </div>
                <div style="width: 413px;height: 280px;display: flex;flex-wrap: wrap;">
                    <div style="width: 413px;height:80px">
                        <span style="font-size: 34px;line-height:80px;font-weight:550">Products</span>
                    </div>
                    <div style="width: 300px;height:160px;">
                        <textarea name="" id="idea" cols="35" rows="10" style="background-color:#f7f8f9;"
                            placeholder="请输入您的建议，我们会积极采纳您的建议并加以修改！"></textarea>
                    </div>
                    <div>
                        <button
                            style="width:60px;height:150px;font-size: 35px;background-color:#ffc32b; border-width: 0;"
                            onclick="sumbitt()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //第一个表格
        function show(image, event) {
            var x;
            var y;
            document.getElementById("photo").style.display = "block";
            x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);
            y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);
            document.getElementById("photo").style.top = y + "px";
            document.getElementById("photo").style.left = x + "px";
            document.getElementById("big").src = "images/" + image;
        }
        function shows() {
            document.getElementById("photo").style.display = "block";
        }
        function hidden() {
            document.getElementById("photo").style.display = "none";
        }
        window.onscroll = "show()";
        //------------------------------------------------------------------------------------------------				
        var map = new Map(); //创建一个集合
        function add_shoppingcart(btn) { //btn就是上面传下来的this
            //console.log(btn);
            var ntr = document.createElement("tr");
            //获取到商品的价格和名称
            var tr = btn.parentNode.parentNode; //获取到按钮的父亲 
            var tds = tr.children;
            //获取商品的名称
            var name = tds[0].innerHTML;
            //获取商品的价格
            var price = tds[2].innerHTML;
            console.log("name:" + name + ",price:" + price);
            //判断集合中是否又加入商品.如果有不能加入,只能加数量,没有可加入
            if (map.has(name)) {
                //如果有不能加入,只能加数量
                var tr1 = map.get(name);
                //console.log(tr1);
                //var btn1=tr1.getElementById("btn1");       
                var btn1 = tr1.getElementsByTagName("button")[1];
                //console.log(btn1);
                jia(btn1);
            } else {
                //如果没有该商品,可以正常添加
                ntr.innerHTML = `
						<td style="text-align:center;">${name}</td>
						 <td style="text-align:center;">${price}</td>
						<td style="text-align:center;">
						<button onclick="jian(this)">-</button>
						<input type="text" value="1" size="1" />
						<button id="btn1" onclick="jia(this)">+</button>
						</td>
						<td>${price}</td>
						<td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;
                //将name和一行数据存入到集合中
                map.set(name, ntr);
                //找到tbody的对象
                var tbody = document.getElementById("goods");
                //把上面创建好的一行五列加入到tbody中
                tbody.appendChild(ntr);
                sum();
            }
        }

        function del(btn) {
            var tr = btn.parentNode.parentNode;
            tr.remove(); //删除的是DOM文档中的内容,并没有把集合中的内容删除.
            var tr = btn.parentNode.parentNode; //获取到按钮的父亲
            var tds = tr.children;
            //获取商品的名称
            var name = tds[1].innerHTML;
            map.delete(name); //删除的是集合中的内容
            sum();
        }

        function jian(btn) {
            var inpt = btn.nextElementSibling;
            var amount = inpt.value;
            if (amount <= 1) {
                return;
            } else {
                inpt.value = --amount;
                var trs = btn.parentNode.parentNode;
                console.log(trs);
                var price = parseInt(trs.children[1].innerHTML);
                trs.children[3].innerHTML = price * amount;
                sum();
            }
        }

        function jia(btn) { //形式参数
            //获取+号按钮左边input控件的对象
            var inpt = btn.previousElementSibling;
            //console.log(Inpt);
            var amount = inpt.value;
            //console.log(amount);
            inpt.value = ++amount; //把累加后的数放进去
            var td = btn.parentNode.previousElementSibling;
            //console.log(td);
            var price = parseInt(td.innerHTML); //取到单价的值
            //console.log(price);
            var rtd = btn.parentNode.nextElementSibling;
            rtd.innerHTML = price * amount;
            sum();
        }

        //求所有商品的累加和
        function sum() {
            //获取到tbody的对象
            var tbody = document.getElementById("goods");
            var trs = tbody.children; //得到tbody的孩子
            var total = 0; //用于求累加和
            for (i = 0; i < trs.length; i++) { //取到每一个商品的价格
                var price = trs[i].children[3].innerHTML;
                total = total + parseInt(price);
            }
            var t = document.getElementById("total");
            //然后把total的值放入到t对象中
            t.innerHTML = total;
        }
        function tk(btn) {
        }
    </script>
</body>

</html>